import { Navigate, useRoutes } from 'react-router-dom'
import React,{lazy,Suspense} from 'react';

function lazyLoad (Component){
  return (
    <Suspense fallback={<div>loading</div>}>
      <Component/>
    </Suspense>
  )
}

export const rootRouters = [
  {
    path:"/app3/",
    key:"/app3/index",
    element:lazyLoad( lazy(()=>import('../views/about/index.jsx'))),
  },
  {
    path:"/app3/about",
    key:"/app3/about",
    element:lazyLoad( lazy(()=>import('../views/index/index.jsx'))),
  },
  {
    path:"/app3/404",
    key:"/app3/404",
    element:lazyLoad( lazy(()=>import('../views/404/index.jsx'))),
  },
  {
    path:"*",
    element: <Navigate to={"/app3/404"}/>,
  }
]

const Router =()=> {
  return useRoutes(rootRouters)
};

export default Router;